<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>通知消息
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/static/css/x-admin.css" media="all">
</head>
<body >
<div class="x-nav">
            <span class="layui-breadcrumb">
              <a><cite>首页</cite></a>
              <a><cite>会员管理</cite></a>
              <a><cite>会员列表</cite></a>
            </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新"><i class="layui-icon"
                                                                        style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body" >
    <form class="layui-form x-center" action="" style="width:800px">
        <div class="layui-form-pane" style="margin-top: 15px;">
            <div class="layui-form-item">
                <label class="layui-form-label">日期范围</label>
                <div class="layui-input-inline">
                    <input class="layui-input" placeholder="开始日" id="LAY_demorange_s" onclick="layui.laydate({elem: this, festival: true})">
                    <#--<input class="layui-input"   placeholder="开始日" id="LAY_demorange_s">-->
                </div>
                <div class="layui-input-inline">
                    <input class="layui-input" placeholder="截止日" id="LAY_demorange_s" onclick="layui.laydate({elem: this, festival: true})">
                    <#--<input class="layui-input"   placeholder="截止日" id="LAY_demorange_e">-->
                </div>
                <div class="layui-input-inline">
                    <input type="text" name="username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                </div>

                <div class="layui-input-inline" style="width:80px">
                    <button class="layui-btn" lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i>
                    </button>
                </div>
            </div>
        </div>
    </form>
    <xblock>
        <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon">&#xe640;</i>批量删除</button>
        <button class="layui-btn" onclick="member_add('添加产品','/sysmsg/insertMsgPage','800','750')"><i class="layui-icon">&#xe608;</i>添加
        </button>
        <span class="x-right" style="line-height:40px">共有数据：<span type="record"></span>条</span></xblock>
    <div class="layui-form">
        <table class="layui-table">
            <thead>
            <tr>
                <th style="width: 5%"><input  type="checkbox" name="" lay-skin="primary" lay-filter="allChoose"></th>
                <th>id</th>
                <th>标题</th>
                <th>内容</th>
                <th>发布时间</th>
                <th>
                    操作
                </th>
            </tr>
            </thead>
            <tbody id="app">
            <tr v-for="msg in data1">
                <td><input type="checkbox" name="" lay-skin="primary"></td>
                <td id="sid">{{msg.id}}</td>
                <td id="stitle" >{{msg.title}}</td>
                <td id="scontent">{{msg.content}}</td>
                <td id="sdate" width="200px">{{msg.publishTime|time}}</td>


                <td class="td-manage">
                    <a title="详情" href="javascript:;" onclick="member_show('详情','/sysmsg/msgById','800','750',document.getElementById('sid').innerHTML)"
                       class="ml-5" style="text-decoration:none">
                        <i class="layui-icon">&#xe642;</i>
                    </a>
                    <a title="删除" href="javascript:;" onclick="member_del(this,document.getElementById('sid').innerHTML)"
                       style="text-decoration:none">
                        <i class="layui-icon">&#xe640;</i>
                    </a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <div id="page"></div>
</div>
<script src="/static/lib/layui/layui.js" charset="utf-8"></script>
<script src="/static/js/x-layui.js" charset="utf-8"></script>
<script src="/static/js/vue/vue.js" charset="utf-8"></script>
<script>
    layui.use(['laydate', 'element', 'laypage', 'layer'], function () {
        $ = layui.jquery;//jquery
        laydate = layui.laydate;//日期插件
        lement = layui.element();//面包导航
        laypage = layui.laypage;//分页
        layer = layui.layer;//弹出层

        //以上模块根据需要引入
        var v=new Vue({
            el: '#app',
            data:{
                data1:[]
            }
        })

        var pageSize=5;

        //以下将以jquery.ajax为例，演示一个异步分页
        function demo1(curr){

            $.post("/sysmsg/allmsgs", {pageSize: pageSize, currPage: curr || 1},

                    function(data){

                        if (data != null) {
                            v.data1 = data.json;
                        }
                        //显示分页
                        laypage({
                            cont: 'page', //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div id="page1"></div>
                            // pages: data.pages, //通过后台拿到的总页数
                            curr: curr || 1, //当前页
                            pages: parseInt(data.totalNum/pageSize+1),
                            first: 1,
                            last: parseInt(data.totalNum/pageSize+1),
                            prev: '<em><</em>',
                            next: '<em>></em>',
                            jump: function(obj, first){ //触发分页后的回调
                                if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr
                                    demo1(obj.curr);
                                }
                            }
                        });
                    });
        };
        demo1();

    });

    Vue.filter('time', function (value) {//value为13位的时间戳
        function add0(m) {
            return m < 10 ? '0' + m : m
        }
        var time = new Date(parseInt(value));
        var y = time.getFullYear();
        var m = time.getMonth() + 1;
        var d = time.getDate();

        return y + '-' + add0(m) + '-' + add0(d);
    });


    //批量删除提交
    function delAll() {
        layer.confirm('确认要删除吗？', function (index) {
            //捉到所有被选中的，发异步进行删除
            layer.msg('删除成功', {icon: 1});
        });
    }
    /*用户-添加*/
    function member_add(title, url, w, h) {
        x_admin_show(title, url, w, h);
    }
    /*用户-查看*/
    function member_show(title, url, w, h,id) {
        url=url+'?id='+id;
        x_admin_show(title, url, w, h);
    }

    /*用户-停用*/
    function member_stop(obj, id) {
        layer.confirm('确认要停用吗？', function (index) {
            //发异步把用户状态进行更改
            $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" onClick="member_start(this,id)" href="javascript:;" title="启用"><i class="layui-icon">&#xe62f;</i></a>');
            $(obj).parents("tr").find(".td-status").html('<span class="layui-btn layui-btn-disabled layui-btn-mini">已停用</span>');
            $(obj).remove();
            layer.msg('已停用!', {icon: 5, time: 1000});
        });
    }

    /*用户-启用*/
    function member_start(obj, id) {
        layer.confirm('确认要启用吗？', function (index) {
            //发异步把用户状态进行更改
            $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" onClick="member_stop(this,id)" href="javascript:;" title="停用"><i class="layui-icon">&#xe601;</i></a>');
            $(obj).parents("tr").find(".td-status").html('<span class="layui-btn layui-btn-normal layui-btn-mini">已启用</span>');
            $(obj).remove();
            layer.msg('已启用!', {icon: 6, time: 1000});
        });
    }
    // 用户-编辑
    function member_edit(title, url, id, w, h) {
        x_admin_show(title, url,id, w, h);
    }
    /*密码-修改*/
    function member_password(title, url, id, w, h) {
        x_admin_show(title, url, w, h);
    }
    /*用户-删除*/
    function member_del(obj, id) {
        layer.confirm('确认要删除吗？', function (index) {
            //发异步删除数据
            $.post("/sysmsg/delById",{id:id},function (data) {
                if (data!=""){
                    layer.msg('已删除!', {icon: 1, time: 1000});
                }
            })
            $(obj).parents("tr").remove();

        });
    }
</script>
<script>
    var _hmt = _hmt || [];
    (function () {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();


    layui.use('form', function(){
        var $ = layui.jquery, form = layui.form();

        //全选
        form.on('checkbox(allChoose)', function(data){
            var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]');
            child.each(function(index, item){
                item.checked = data.elem.checked;
            });
            form.render('checkbox');
        });

    });
</script>
</body>
</html>